<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>

<!DOCTYPE HTML>
<html>
<head>

    <base href="<%=basePath%>">
    <title>商城首页图片</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <%-- 引用layui.css --%>

    <link rel="stylesheet" type="text/css"
          href="<%=basePath%>js/layui/css/layui.css"/>
    <link rel="stylesheet" type="text/css" href="<%=basePath%>css/common.css"/>
    <link rel="stylesheet" type="text/css" href="<%=basePath%>css/font/iconfont.css?v=1.0.0" media="all">
    <link href="<%=basePath%>js/common/cropper/cropper.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="<%=basePath%>js/common/jquery-1.11.3.js"></script>
    <script type="text/javascript" src="<%=basePath%>js/jQueryFileUpload/js/vendor/jquery.ui.widget.js"></script>
    <script type="text/javascript" src="<%=basePath%>js/jQueryFileUpload/js/jquery.iframe-transport.js"></script>
    <script type="text/javascript" src="<%=basePath%>js/jQueryFileUpload/js/jquery.fileupload.js"></script>
    <script type="text/javascript" src="<%=basePath%>js/common/cropper/cropper.js"></script>
    <style type="text/css">
        .laytable-cell-1-pic_path { /*最后的pic为字段的field*/
            height: auto;
            width: auto;
        }
    </style>
</head>
<body>
<div class="ibox">
    <div class="ibox-content bodycss">
        <!-- 表单搜索 开始 -->
        <section class="panel panel-padding ">
            <form class="layui-form layui-form-pane form-search"
                  onsubmit="return false" method="post">

                <div class="layui-form-item layui-inline">
                    <label class="layui-form-label">图片名称</label>
                    <div class="layui-input-inline">
                        <input name="name" id="name" value="" placeholder="请输入图片名称"
                               class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item layui-inline">
                    <button class="layui-btn layui-btn-primary" lay-submit
                            lay-filter="seach">
                        <i class="layui-icon"></i> 搜索
                    </button>
                </div>
            </form>
        </section>
        <!-- 表单搜索 结束 -->
        <section class="panel panel-padding ">
            <table class="layui-table"
                   lay-data="{
	                        id: 'PicTeble',
	                        width:'auto',
	                        height:'auto',
	                        url:'tvindex/findHomePic.do',
	                        method:'post',
	                        page:true,
	                        even:true,
	                        skin:'row',
	                        limits:[10,20,30,40,50],
	                        limit:10}"
                   lay-filter="popedomLay">
                <!-- lay-filter:监听 -->
                <thead>
                <tr>
                    <th lay-data="{checkbox:true,disabledKey:'check_status',disabledKeyValue:'1,2'}"></th>
                    <th lay-data="{type:'numbers', width:50}">序号</th>
                    <!-- <th lay-data="{field:'orderId', width:120,align:'center'}">订单id</th> -->
                    <th lay-data="{field:'name', width:200,align:'center'}">图片名称</th>
                    <th lay-data="{field:'pic_path', width:300, align:'center',templet:'#imgtmp'}">图片</th>
                    <th lay-data="{field:'update_user', width:200,align:'center'}">修改人</th>
                    <th lay-data="{field:'update_time', width:200,align:'center'}">修改时间</th>
                    <th lay-data="{fixed: 'right', width:300, align:'center', toolbar: '#popedomBar'}">操作</th>
                </tr>
                </thead>
            </table>
        </section>
    </div>
</div>
<script type="text/html" id="popedomBar">
    <button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="updatePic">修改首页图片</button>
</script>
<script type="text/html" id="imgtmp">
    <img src="{{d.pic_path}}"/>
</script>

<script type="text/javascript" src="<%=basePath%>js/layui/layui.js"></script>
<script type="text/javascript">
    layui.config({
        base: "<%=basePath%>/js/common/"
    }).use(["common", "element", "layer", "form", "table", "jquery"], function () {
        var elem = layui.element;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var $ = layui.jquery;
        layui.common.init();
        /**
         * 监听刷新表格
         */

        /* 当点击搜索时，执行重载 */
        form.on('submit(seach)', function (data) {
            // layer.msg(JSON.stringify(data.field));
            table.reload('PicTeble', {
                where: data.field,
                page: {
                    curr: 1
                }
            });
            return false;
        });
        //监听行工具事件
        table.on('tool(popedomLay)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;
            //console.log(data);
            var picPath = data.pic_path
            var name = data.name
            var id = data.id
            /*console.log(picPath);
            console.log(name);
            console.log(id);*/

            if (layEvent == "updatePic") {
                layer.open({
                    type: 2,
                    title: '修改首页图片',
                    content: 'tvindex/toUpdatePic.do?picPath=' + data.pic_path + '&name=' + data.name + '&id=' + data.id,
                    area: ['800px', '700px'],
                    anim: 5,
                    isOutAnim: true,
                    maxmin: true,
                    resize: false,
                    moveOut: true,
                    zIndex: 99999,
                    success: function (layero, index) {
                        var body = layer.getChildFrame('body', index);
                    },
                    end: function () {
                        table.reload("PicTeble");
                        setTimeout('window.location.reload()', 500);
                    }
                });
            }


        });


    });
</script>
</body>
</html>
